<template>
  <lc-rower>
    <div class="article-container" id="articleContainer">
      <div id="content" class="no-break"></div>
      <slot name="textContent" />
    </div>
  </lc-rower>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";

const props = withDefaults(
  defineProps<{
    text: any;
  }>(),
  {
    text: "",
  },
);

const contentElement = ref();

onMounted(() => {
  contentElement.value = document.getElementById("content");
  contentElement.value.textContent = props.text;
});
</script>
<style scoped>
/* 防止自动换行，保证连续渲染的文字不强制换行 */
.no-break {
  white-space: pre-wrap; /* 保留文本中的换行和空格 */
  word-wrap: break-word; /* 超出宽度时自动换行 */
}
</style>
